<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.min.css">

    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="https://unpkg.com/layui@2.6.8/dist/layui.js"></script>
</head>

<body>
    <div class="box">
        <div class="imgBox">
            <img src="./img/logo2.png" alt="">
        </div>
        <div class="main">
            <input type="text" placeholder="姓名：">
            <p class="p" style="color: red;position: absolute; right: 19%;bottom: 22%;display: none;">！输入格式错误</p>
        </div>
        <div class="main1">
            <input type="number" placeholder="+86" value="15626638754">
            <p class="p1" style="color: red;position: absolute; right: 19%;bottom: 22%;display: none;">！输入格式错误</p>
        </div>
        <div class="main2">
            <input type="tel" placeholder="身份证号码：" value="44092120060726807X">
            <p class="p2" style="color: red;position: absolute; right: 19%;bottom: 22%;display: none;">！输入格式错误</p>
        </div>
        <div class="btn">
            <a href="./mine.html"><button>我的预约</button></a>
            <a href="#" class="login"><button id="btn1">开始预约</button></a>
        </div>
    </div>
</body>
<script>
    let login = document.querySelector(".login");
    let main = document.querySelector(".main1>input");
    // console.log(main.value);

    let main1 = document.querySelector(".main2>input");

    let main2 = document.querySelector(".main>input");
    // console.log(main2.value);

    let p2 = document.querySelector(".p")
    let btn1 = document.querySelector("#btn1");
    let p = document.querySelector(".p1")
    let p1 = document.querySelector(".p2")
    let a = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
    let b = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
    let c = /[\u4e00-\u9fa5]{2,6}$/gm;
    main.addEventListener("blur", function(e) {
        if (a.test(main.value)) {
            main.value = main.value;
            console.log("输入正确");
        } else if (main.value != '') {
            main.value = "";
            p.style.display = "block";
        }
    });
    main.onfocus = function() {
        p.style.display = "none";
    }

    main1.addEventListener("blur", function(e) {
        if (b.test(main1.value)) {
            main1.value = main1.value;
            console.log("输入正确");
        } else if (main1.value != '') {
            main1.value = "";
            p1.style.display = "block";
        }
    });
    main1.onfocus = function() {
        p1.style.display = "none";
    }

    main2.addEventListener("blur", function(e) {
        if (c.test(main2.value)) {
            main2.value = main2.value;
            console.log("输入正确");
        } else if (main2.value != '') {
            main2.value = "";
            p2.style.display = "block";
        }
    });
    main2.onfocus = function() {
            p2.style.display = "none";
        }
        //fetch
    btn1.addEventListener("click", () => {
        // POST请求
        fetch("http://newshopapi.0melon0.cn/api/f_user/register", {
            method: "POST", // type请求类型
            body: JSON.stringify({
                "name": main2.value,
                "phone": main.value,
                "card": main1.value
            }),
            // body: "type=冷笑话", //参数放置请求体
            headers: { //设置请求头，表单编码格式传输数据(参数)
                // "Content-Type": "application/x-www-form-urlencoded" //表单验证
                "Content-Type": "application/json"
            },
        }).then(function(response) {
            return response.json(); //转json格式返回值，解析为可读数据
        }).then(function(data) {
            if (data.msg === "登录成功") {
                layer.alert("登录成功!,正在跳转...");
                setTimeout(() => {
                    login.href = "./index2.html";
                    btn1.click();
                }, 2000)
                console.log(data); //获取请求成功的结果
                localStorage.setItem("token", data.result.token);
                localStorage.setItem("userName", main2.value);
                localStorage.setItem("phone", main.value);
                console.log(localStorage.getItem("token"));
            } else {
                throw new Error(layer.alert("登录失败，请重新输入"))
            }

        })
    })
</script>

</html>